<template>
  <ul class="list-ul">
    <li v-for="(item,i) in list" :key="i" :class="{'show-dot':item.dot,'list-item':true}">
      <a :href="item.href" target="_bank">
        <p>{{ item.text }}</p>
        <p>{{ item.createdAt }}</p>
      </a>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'List',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>
<style lang='scss' scoped>
@import "@/styles/mixin.scss";
.list-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  .list-item {
    @include flex($justify: space-around, $align: center);
    height: 52px;
    border-bottom: 1px solid rgba(247, 247, 247, 1);
    box-sizing: border-box;
    & > a {
      flex: 1 0 auto;
      @include flex($justify: space-around, $align: center);
      font-size: 14px;
      color: #333;
      & > p:first-of-type {
        flex: 1 0 auto;
      }
      &:visited {
        color: #888;
      }

      & > p:last-of-type {
        flex: 0 0 90px;
        color: #888;
      }
    }
  }
  .show-dot {
    &::before {
      content: "";
      display: inline-block;
      flex: 0 0 4px;
      height: 4px;
      width: 4px;
      border-radius: 50%;
      background-color: #888;
      margin-right: 5px;
    }
  }
}
</style>
